<template>
  <div>
    <form>
      <table style="width: 600px; margin: auto">
        <caption>
          欢迎光临_vue开发的收银系统_水果店
        </caption>
        <tr>
          <th>苹果 10￥/斤，折扣 &lt; 8折 &gt;</th>
        </tr>
        <tr>
          <td>
            <span>请输入你要购买的斤数</span>
            <input type="text" placeholder="0" v-model.number="sum" />
          </td>
        </tr>
        <tr>
          <td>
            <button @click.prevent='total'>结账买单</button>
          </td>
        </tr>
        <tr>
          <td>
            <span>
              结账单：总价:{{ tot ? tot : 0 }}￥元 
              折后价:{{after ? after : 0}}￥元 
              省了:{{ dif ? dif : 0 }}￥元</span
            >
          </td>
        </tr>
      </table>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sum: '',
      tot: '',
      after: '',
      dif: '',
    }
  },
  methods: {
    total() {
      this.tot = this.sum * 10
      this.after = this.tot * 0.8
      this.dif = this.tot - this.after
    },
  },
}
</script>

<style>
table,
th,
tr td {
  border: 1px solid black;
  text-align: center;
}
</style>
